<template>
	<view>
		<template v-if="pageType == 'listPage'">
			<view class="tthdItem" @tap="goHdDet">
				<view class="tthdTop alignCen">
					<image class="tthdTime" :src="getStaticFilePath('sq-time.png')"></image>
					<text>2023-12-20 20:30-16:00</text>
				</view>
				<view class="tthdCon hasFlex">
					<view class="tthdImg"></view>
					<view class="conWrap">
						<view class="tthdTit ellip">房贷首付给对方犯房贷首付得上发的生留个科技大国</view>
						<view class="address multiEllip clamp2">地址：法律的开始积分广是段给</view>
						<view class="conBot spaceBet">
							<view>参与<text class="joinNum">60</text>人</view>
							<view class="hdStatus">正在进行</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tthdItem">
				<view class="tthdTop alignCen">
					<image class="tthdTime" :src="getStaticFilePath('sq-time.png')"></image>
					<text>2023-12-20 20:30-16:00</text>
				</view>
				<view class="tthdCon hasFlex">
					<view class="tthdImg"></view>
					<view class="conWrap">
						<view class="tthdTit ellip">房贷首付给对方留个科技大国</view>
						<view class="address multiEllip clamp2">地址：法律的开始积开始积分广是段</view>
						<view class="conBot spaceBet">
							<view>参与<text class="joinNum">60</text>人</view>
							<view class="hdStatus end">已结束</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else-if="pageType == 'favorPage'">
			<view class="tthdItem">
				<view class="tthdTop alignCen">
					<image class="tthdTime" :src="getStaticFilePath('sq-time.png')"></image>
					<text>2023-12-20 20:30-16:00</text>
				</view>
				<view class="tthdCon hasFlex">
					<view class="tthdImg"></view>
					<view class="conWrap">
						<view class="tthdTit hasFlex">
							<view class="innerTit ellip">房贷首付给对方留个科技反倒是分手费发生的聚福楼看电视大国</view>
							<!-- noStart ing end -->
							<text class="titStatus ing">(进行中)</text>
						</view>
						<view class="address multiEllip clamp2">地址：法律的开始积开始积分广是段</view>
						<view class="conBot spaceBet">
							<view>收藏<text class="joinNum">60</text>人</view>
							<view class="hdStatus favor">取消收藏</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props:{
			pageType:{
				type:String,
				default:'listPage'//listPage favorPage
			}
		},
		method:{
			goHdDet(){
				uni.navigateTo({
					url:'/pages/subSqIndex/ttHd/tthdDet'
				})
			}
		}
	}
</script>
<style src="@/static/fonts/staatliches.css"></style>
<style lang="scss" scoped>
	$bg: #EEEEFF;

	.tthdItem {
		border-radius: 16rpx;
		border: 1rpx solid $bg;
		margin-top: 30rpx;
		background:#fff;
		.tthdTop {
			height: 60rpx;
			background: $bg;
			border-radius: 16rpx 16rpx 0 0;
			padding: 0 15rpx;
			font-size: 26rpx;
			color:$pss-sq-main;

			.tthdTime {
				width: 36rpx;
				height: 36rpx;
				font-weight: 600;
				margin-right: 15rpx;
			}
		}

		.tthdCon {
			padding: 15rpx;
			.tthdImg {
				width: 130rpx;
				height: 130rpx;
				border-radius: 8rpx;
				background: #cffec7;
				margin-right: 15rpx;
				flex-shrink: 0;
			}
			.conWrap {
				width: 79%;
				.tthdTit {
					font-size: 30rpx;
					color: $sq-main0;
					font-weight: 600;
					align-items: center;
					.innerTit{
						max-width: 82%;
					}
					.titStatus{
						font-weight: normal;
						font-size: 24rpx;
						margin-left: 5rpx;
						&.end,
						&.noSatrt{
							color: $sq-main8;
						}
						&.ing{
							color:$pss-sq-main;
						}
					}
				}
				.address {
					font-size: 26rpx;
					color: $sq-main4;
					margin: 10rpx 0;
				}
				.conBot {
					font-size: 26rpx;
					color: $sq-main4;
					align-items: center;
					.joinNum{
						color: $pss-sq-main;
						font-family:'Staatliches';
						font-size: 30rpx;
						font-weight: 600;
						margin: 0 10rpx;
					}
				}

				.hdStatus {
					width: 120rpx;
					height: 42rpx;
					line-height: 42rpx;
					text-align: center;
					border: 1rpx solid $bg;
					background: #D9D5F7;
					color: $pss-sq-main;
					border-radius: 8rpx;
					font-size: 24rpx;
					&.end {
						background: $sq-fue;
						color: $sq-main8;
					}
					&.favor{
						background: $sq-fue;
						color: $sq-main8;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>